<template>
<div>
<div class='list_nav_top'>
    <van-search placeholder="请输入搜索关键词" v-model="value" left-icon="cart-circle-o" />
</div>
<div class='van-box'>
<div class='van-left'>
  <van-badge-group :active-key="activeKey" @change="onChange" >
  <router-link :to="{ name: 'rou' }"><van-badge title="肉类海鲜" /></router-link>
  <router-link :to="{ name: 'guo' }"><van-badge title="果蔬蛋品"/></router-link>
  <router-link :to="{ name: 'lengcang' }"><van-badge title="熟食冷藏"/></router-link>
  <router-link :to="{ name: 'jiu' }"><van-badge title="酒水饮料"/></router-link>
  <router-link :to="{ name: 'xiuxian' }"><van-badge title="休闲糖巧"/></router-link>
  <router-link :to="{ name: 'cha' }"><van-badge title="冲调茶饮"/></router-link>
  <router-link :to="{ name: 'youxuan' }"><van-badge title="优选国际"/></router-link>
  <router-link :to="{ name: 'meizhuang' }"><van-badge title="美妆个护"/></router-link>
  <router-link :to="{ name: 'muying' }"><van-badge title="母婴用品"/></router-link>
  <router-link :to="{ name: 'baojian' }"><van-badge title="营养保健"/></router-link>
  <router-link :to="{ name: 'jiaju' }"><van-badge title="家居用品"/></router-link>
</van-badge-group>
</div>
<div class="van-right">
    <router-view></router-view>

</div>
</div>   
</div>
</template>
<script>
export default {
    data() {
    return {
      activeKey: 0,
      value:""
    };
  },

  methods: {
    onChange(key) {
      this.activeKey = key;
      console.log(this.activeKey)
    }
  }
}
</script>

<style scoped>
[class*=van-hairline]::after{
    border: 0;
    /* van -badge边框取消 */
}
.van-badge{
     height: 100%;
     font-size: 0.9rem;
     text-align: center;
}
.van-box{
    display:flex;
   padding-bottom: 3.75rem
}
.van-left{
    width:20%;
    
}
.van-badge--select {
    border-color: blue;
    color: #000
}

.van-badge title{
    width:50px
}

/* .van-left  Css end */
.van-right{
    width:80%;
    font-size: 1rem;
    color: #999
}
/* .right_list{
    display: flex;
    flex-direction: column;
}
.product_name{
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    margin-left: auto;
    margin-right: auto;
}
.product_banner{
    display: flex;
    justify-content: center;
    margin: 0 1rem
     width: 16.875rem;
    height: 5rem; 
}
.product_banner img{
    width: 100%;
    height: 100%;
    
}
.product_list{
    display: flex;
    flex-direction: column;
}
.product_list ul{
    display: flex;
    justify-content: space-around
}
.product_list li{
    list-style: none;
    margin: 1.3rem 0;
   text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 0.8rem;
  
}
.product_list li .p-img{
    width:3.81rem;
    height:3.81rem;
}
.product_list li img{
    width:100%;
    height: 100%;
} */
</style>
